<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <button @click="add">点击增加</button>
        <h1> {{ count }} </h1>
    </div>
    <hr>

    <div id='bpp'>
        <button @click="add">点击增加</button>
        <h1> {{ count }} </h1>
    </div>
</body>
<script>

    /*
        mixin 是可以将公共的属性和方法放在一个混入中
        混入中的数据优先级低于组件自身
        函数混入的优先级低于组件自身
        混入的生命周期优先级会高于组件自身
    */

    const myMixin = {
        data() {
            return {
                count: 1000
            }
        },
        mounted() {
            console.log(11111111111);
        },
        methods: {
            add() {
                this.count += 10
            }
        }
    }

    const app = {
        mixins: [myMixin],
        data() {
            return {
                // count: 100
            }
        },
        mounted() {
            console.log(222222222);
        },
        methods: {
            // add() {
            //     this.count++
            // }
        },
    }
    Vue.createApp(app).mount('#app')


    const bpp = {
        mixins: [myMixin],
        data() {
            return {
                count: 100
            }
        },
        mounted() {
            console.log(222222222);
        },
        methods: {
            // add() {
            //     this.count++
            // }
        },
    }
    Vue.createApp(bpp).mount('#bpp')
</script>

</html>